我想說的是
組件拆分的方法

在前面幾篇中，其實已經寫好了一個基本的按摩服務列表
但是從頭到尾只使用了一個組件
在小型專案中也許可以這麼做，但隨著專案大小
勢必會需要把功能拆分成不同組建，交給不同工程師開發
再來就來試著拆分組件！

首先我們先把按摩服務列表清單給拆成獨立組件
建立新的 js 檔案，記得當初 Massage 組件注意的事項嗎？

• 大寫命名
• export
• 並且在父層引入

因為是服務清單，就取名為 MassageService.js

import React, { Component } from 'react';
class MassageService extends Component {
    state = {  }
    render() { 
        return ( 
            <li>test</li>
         );
    }
}
 
export default MassageService;

然後在父組件，也就是 Massage.js 內

import MassageService from './MassageService'

並且替換掉原本 li 標籤的內容
直接引入我們的新組件

this.state.massageServiceList.map((massageService, index) => {
  return (
    <MassageService/>
  )
})

到這邊如果沒有發生錯誤的話
功能應該都沒有被影響，唯一的變化是在新增服務的時候
再也不會顯示我們剛剛輸入的內容
而是變成程式內寫死的 test

接下來要做的是組件的傳值，並且探討什麼是單向數據流